<template>
<div class="detail">
    <div class="performance-one">
        <div class="total-score">
            <h3>您此次站点检测得分: <span :style="{color: scoreColor}">89.5</span>分</h3>
        </div>
        <div class="distribution">
            <ProgressScore :data="state.timeScore" keyVal="时间性能评分细则" />
            <ProgressScore :data="state.sourceScore" keyVal="资源优化评分细则" />
        </div>
        <div class="score-about">
            <div class="item-dot"><i style="background: #FF4E42;"></i>0 - 60</div>
            <div class="item-dot"><i style="background: #FFA400;"></i>60 - 85</div>
            <div class="item-dot"><i style="background: #0CCE6B;"></i>85 - 100</div>
        </div>
    </div>
    <div class="performance-two">
        <EntriesChart :data="state.performance" />
    </div>
    <div class="performance-three">
        <h3>重要时间点评测(TIMING)</h3>
        <ul class="timing-list">
            <li v-for="(item) in state.auditsTiming" :key="item.title">
                <TimeItem :data="item"></TimeItem>
            </li>
        </ul>
    </div>
    <div class="performance-four">
        <h3>调整建议(opportunity)</h3>
        <ul class="opportunity-list">
            <li v-for="item in state.opportunity" :key="item.title">
                <CollapseHead :data="item" />
            </li>
        </ul>
    </div>
</div>
</template>

<script>
import {
    useStore
} from "vuex";
import ProgressScore from "../components/ProgressScore.vue";
import EntriesChart from "../components/EntriesChart.vue";
import TimeItem from "../components/TimeItem.vue";
import CollapseHead from "../components/CollapseHead.vue";
import {
    computed,
    reactive
} from "vue";
export default {
    name: "detail",
    components: {
        ProgressScore,
        EntriesChart,
        TimeItem,
        CollapseHead
    },
    setup() {
        const store = useStore();
        const {
            score,
            performanceData
        } = store.state.home.data;
        const scoreColor = getTotalScoreColor(score.totalScore);
        const state = reactive({
            timeScore: score.timeScore,
            sourceScore: score.sourceScore,
            performance: performanceData.performance,
            auditsTiming: performanceData.lighthouse.audits.timing,
            opportunity: performanceData.lighthouse.audits.opportunity
        })
        return {
            scoreColor,
            state
        }
    }
}

function getTotalScoreColor(score) {
    return computed(() => {
        if (score > 85) {
            return "#2ec1ac";
        } else if (score > 60) {
            return "#ffa62b";
        } else {
            return "#f05454";
        }
    })
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/detail.scss";
</style>
